<template>
	<view class="empire-adress__card">
		<uni-card padding="0">
			<template #title>
				<view class="empire-mall__flex">
					<view class="header-title">
						<text class="title">{{ title }}</text>
						<text class="space">{{ telephone }}</text>
					</view>
					<text v-if="modelChecked" class="title-tag">默认</text>
				</view>
			</template>
			<text>{{ address }}</text>
			<template #actions>
				<view class="empire-mall__flex-between">
					<label class="empire-mall__flex">
						<checkbox
							:checked="modelChecked"
							:style="{ transform: 'scale(0.6) translateX(-12rpx)' }"
							@click="handleToggleChecked"
						/>
						<text>{{ modelChecked ? '已默认' : '设为默认' }}</text>
					</label>
					<view class="empire-mall__around">
						<EmpireTag class="space" @click="handleCopy" text="复制"></EmpireTag>
						<EmpireTag class="space" @click="handleUpdate" text="修改"></EmpireTag>
						<EmpireTag class="space" type="danger" @click="handleDelete" text="删除"></EmpireTag>
					</view>
				</view>
			</template>
		</uni-card>
		<uni-popup ref="pupop" type="dialog">
			<uni-popup-dialog
				ref="dialog"
				type="success"
				title="是否删除改地址？"
				:show-close="true"
				border-radius="10rpx 10rpx 10rpx 10rpx"
				@close="hanldeClose"
				@confirm="handleConfirm"
			/>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import EmpireTag from '@/components/empire-tag.vue';
const props = defineProps({
	title: {
		type: String,
		default: undefined
	},
	telephone: {
		type: String,
		default: undefined
	},
	address: {
		type: String,
		default: undefined
	}
});
const pupop = ref();
const modelChecked = defineModel('checked', {
	type: Boolean,
	default: false
});

const emits = defineEmits(['change']);

function handleToggleChecked() {
	modelChecked.value = !modelChecked.value;
	emits('change', modelChecked.value);
}

function handleCopy() {}
function handleUpdate() {}
function handleDelete() {}
function hanldeClose() {
	pupop.value.close();
}
function handleConfirm() {
	//调用删除接口
}
</script>

<style lang="scss" scoped>
.space {
	margin: 0 12rpx;
}
.header-title {
	height: 64rpx;
	line-height: 64rpx;
}
.title {
	font-size: 32rpx;
}
.title-tag {
	@extend .space;
	height: 24rpx;
	line-height: 24rpx;
	text-align: center;
	padding: 0 4rpx;
	font-size: 20rpx;
	color: #ff0000;
	border: 1rpx solid #ff0000;
}
</style>
